<template>
  <view>
    <u-navbar height="50" title="商品详情" title-color="#333" title-size="36"></u-navbar>
    <u-swiper
      :list="bannerList"
      height="750"
      border-radius="0"
      mode="number"
      indicator-pos="bottomRight"
    ></u-swiper>
    <view class="goods-info">
      <p>商品名称商品名称商品名称商品名称商品名称商品名称商品名称</p>
      <view class="points">2600积分</view>
    </view>
    <view class=""> </view>
    <view class="pickupView">
      <view class="sectionTitle">商品信息</view>
      <u-parse :html="goodsInfo.info" :tag-style="tagStyle"></u-parse>
    </view>

    <button @click="show = !show" class="exchange-btn">立即兑换</button>

    <!-- <u-gap height="100"></u-gap> -->
    <!-- <submitBar @add="onShowSku(2)" @pay="onShowSku(3)"></submitBar>
		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuPopup" border-radius="20" :localdata="skuInfo"
			:mode="skuMode" goodsThumbName='cover_url' buy-now-background-color="#FF4242"
			goodsThumbBackgroundColor="#f5f5f5" add-cart-background-color="#22B857" @cart="onAddCart" @buy="onGoodsBuy">
		</vk-data-goods-sku-popup> -->
    <u-popup v-model="show" height="700" mode="bottom">
      <view style="padding: 20rpx">
        <view class="goods-list-box">
          <view class="goods-img-box">
            <!-- <image class="goods-img" src="../../static/img/gimg.png" mode=""></image> -->
          </view>
          <view class="goods-dsce">
            <view class="goods-title">
              <text>商品名称商品名称商品名称商品名称</text>
            </view>
            <view class="goods-price-info">
              <view class="goods_price"> 2600积分 </view>
            </view>
          </view>
        </view>

        <u-line border-style="info"></u-line>
        <view class="address">
          <view class="address-title">收货地址</view>
          <view class="address-info">
            <image style="width: 30rpx; height: 30rpx" src="@/static/dz.png" mode=""></image>
            <text>贵州贵阳南明区花果园湿地公园</text>
          </view>
          <view class="address-user"> <text>赵先生</text><text>1828969889</text> </view>
        </view>
        <u-line color="#e4e7ed"></u-line>
        <view class="num-sum">
          <text class="num-title"> 数量</text>
          <u-number-box class="num-box" v-model="value" @change="valChange"></u-number-box>
        </view>
        <button @click="show = !show" class="exchange-btn2">立即兑换</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import submitBar from '@/components/submit-bar.vue'
export default {
  components: {
    submitBar
  },
  data() {
    return {
      show: false,
      tagStyle: {
        table: 'border-collapse: collapse;',
        td: 'border: 1px solid #ccc;line-height: 1.5;min-width: 50px;padding: 3px 5px;text-align: left;'
      },
      goodsId: '',
      goodsInfo: '',
      // 是否打开SKU弹窗
      skuPopup: false,
      // SKU弹窗模式
      skuMode: 3,
      // 后端返回的商品信息
      skuInfo: {},
      bannerList: [
        {
          image: 'https://static.mdycjt.com/images/placeholder.png',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
        {
          image: 'https://static.mdycjt.com/images/placeholder.png',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        {
          image: 'https://static.mdycjt.com/images/placeholder.png',
          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
        }
      ]
    }
  },
  onLoad(res) {
    this.goodsId = res.id ? res.id : ''
    this.initData()
  },
  methods: {
    initData() {
      let self = this
      self.$u.api.getPreGoodsDetails(this.goodsId).then((res) => {
        self.goodsInfo = res.data
        self.skuInfo = res.data
        self.bannerList = res.data.carousel_imgs_url
      })
    },
    onShowSku(index) {
      this.skuMode = index
      this.skuPopup = true
    },
    onAddCart(item) {
      let self = this
      self.$u.api
        .setPreCartAdd({
          pre_product_sku_id: item._id,
          pre_product_num: item.buy_num
        })
        .then((res) => {
          self.$u.toast('添加成功')
          this.skuPopup = false
        })
    },
    onGoodsBuy(item) {
      let data = {
        sku_id: item._id,
        goods_id: item.goods_id,
        goods_name: item.goods_name,
        goods_image: item.image,
        goods_price: item.price,
        sku_name: item.sku_name_arr.join(','),
        goods_num: item.buy_num
      }
      let goodsPrice = (Number(item.price) * item.buy_num).toFixed(2)
      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          goods: JSON.stringify(data),
          goodsPrice: goodsPrice,
          goodsType: 2
        }
      })
    }
  }
}
</script>

<style scoped>
@import url('pre-goods-details.css');

page {
  background: #eeeeef;
}

.goods-list-box {
  display: flex;
  padding: 15rpx;
  background-color: #fff;
}

.goods-img-box {
  flex: 3;
}

.goods-dsce {
  flex: 7;
}

.goods-img {
  width: 200rpx;
  height: 200rpx;
}

.goods-title {
  font-size: 35rpx;
}

.goods_price {
  float: left;
  font-size: 35rpx;
  color: #f54831;
}

.goods-price-info button {
  width: 180rpx;
  float: right;
  font-size: 30rpx;
  color: #fff;
  background-color: #0f76bc;
  border-radius: 45rpx;
}

.address-title {
  font-size: 35rpx;
}

.address-info {
  font-size: 30rpx;
  margin: 10rpx;
}

.address-user {
  color: #666666;
  font-size: 25rpx;
}
</style>
